<script setup lang="ts">
import {ref, h, nextTick} from 'vue'
import {NTag} from 'naive-ui'
import SearchParamCard from '@/components/SearchParamCard'
import {DataTable} from '@/components/DataTable'

interface SearchParams {
  types: number,
  key: string,
  start_time: number | null,
  end_time: number | null,
}

//查询条件
const rangeDate = ref(null)
const searchParams = ref<SearchParams>({
  types: 0,
  key: '',
  start_time: null,
  end_time: null,
})
//数据表
const log_list = ref<InstanceType<typeof DataTable> | null>(null)
const columns = [
  {
    type: 'expand',
    width: 30,
    resizable: false,
    renderExpand: (row: { req_param: string; result: string }) => {
      const result = [
        h('div', {style: {minWidth: '200px'}}, `返回结果：${row.result}`)
      ]
      if(row.req_param){
        result.unshift(h('div', {style: {minWidth: '200px'}}, `请求参数：${row.req_param}`))
      }
      return h('div',
          {
            class: 'uy-font',
            style: {
              display: 'grid',
              gridTemplateColumns: 'repeat(1, 1fr)',
              padding: '0 10px',
              gap: '10px'
            }
          },
          result
      )
    }
  }, {
    title: '操作人(账号)',
    key: 'account',
    width: 130,
  }, {
    title: '操作',
    key: 'desc_message'
  }, {
    title: '请求类型',
    key: 'method',
    width: 100,
    render: (row: { method: string }) => {
      let color: string = ''
      switch (row.method) {
        case 'GET':
          color = '#4caf50'
          break;
        case 'POST':
          color = '#fa8c17'
          break;
        case 'PUT':
          color = '#1890ff'
          break;
        case 'DELETE':
          color = '#fb541c'
          break;
      }
      return h('span', {style: {color: color, fontWeight: 'bold'}}, row.method)
    }
  }, {
    title: '状态码',
    key: 'status_code',
    width: 70,
    render: (row: { status_code: number }) => {
      const codeMap: Record<number, 'error' | 'success' | 'warning'> = {
        200: 'success',
        201: 'success',
        204: 'success',
        400: 'error',
        500: 'error',
        503: 'error',
        401: 'warning',
        403: 'warning',
        404: 'warning',
      }
      return h(NTag, {type: codeMap[row.status_code] ?? 'error'}, () => row.status_code)
    }
  }, {
    title: '操作地址',
    key: 'uri',
  }, {
    title: '操作IP',
    key: 'ip',
  }, {
    title: '操作结果',
    key: 'result_msg',
    width: 150,
    render: (row: { result_msg: string }) => {
      const map: Record<string, string> = {
        '操作成功': '#00B42A',
        '操作失败': '#F53F3F',
      }
      return h('span', {style: {color: map[row.result_msg]}}, row.result_msg)
    }
  }, {
    title: '操作系统',
    key: 'os_name',
  }, {
    title: '操作浏览器',
    key: 'web_browser',
  }, {
    title: '操作时间',
    key: 'created_at',
    width: 175,
  }]
//查询数据
const searchData = () => {
  log_list.value?.searchData()
}
//重置
const resetData = async () => {
  searchParams.value.key = '';
  searchParams.value.start_time = null;
  searchParams.value.end_time = null;
  rangeDate.value = null;
}
//选择日期
const changeDatePicker = (value: number[] | null) => {
  searchParams.value.start_time = value ? value[0] : null;
  searchParams.value.end_time = value ? value[1] : null;
}
//选择类型
const selectTypes = (types: number) => {
  searchParams.value.types = types;
  nextTick(()=>{
    searchData()
  })

}
</script>
<template>
  <div>
    <search-param-card @onSearch="searchData" @onReset="resetData">
      <template #default>
        <n-form-item >
          <n-input v-model:value="searchParams.key" placeholder="请输入关键字查询..." clearable/>
        </n-form-item>
        <n-form-item >
          <n-date-picker v-model:value="rangeDate" type="daterange"
                         @update:value="changeDatePicker"
                         :year-range="[2000,2100]" style="width: 270px"
                         clearable/>
        </n-form-item>
      </template>
    </search-param-card>
    <n-card>
      <data-table
          ref="log_list"
          :columns="columns"
          :params="searchParams"
          url="/sett/admin_logs">
        <template #toolBarLeft>
          <n-button-group>
            <n-button :type="searchParams.types==0?'primary':'default'" @click="selectTypes(0)">登录</n-button>
            <n-button :type="searchParams.types==1?'primary':'default'" @click="selectTypes(1)">操作</n-button>
          </n-button-group>
        </template>
      </data-table>
    </n-card>
  </div>
</template>

<style scoped lang="scss">

</style>
